<template>
    <div>
        <div>
            <div style="margin:15px;padding:20px;background:#fff;border:1px solid #ddd">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">开始时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="开始时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">结束时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7" class="text-left">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <el-button type="text">今天</el-button>
                            <el-button type="text">7天</el-button>
                            <el-button type="text">15天</el-button>
                            <el-button type="text">30天</el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-left">
                            <el-button v-if="isUnfurl" type="text" @click="unfurl"><i class="el-icon-arrow-down"></i>更多筛选</el-button>
                            <el-button v-else type="text" @click="unfurl"><i class="el-icon-arrow-up"></i>收起筛选</el-button>
                    </el-col>
                </el-row>
                <el-row style="margin-top:20px" :gutter="24" v-show="!isUnfurl">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">间隔时段</div>
                            <el-select v-model="supplier" filterable placeholder="请选择间隔时段" size="medium" class="w-100p">
                            <el-option
                                v-for="item in suppliers"
                                :key="item.id"
                                :label="item.name"
                                :disabled="item.state!='NORMAL'"
                                :value="item.id">
                            </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">时段</div>
                            <el-select v-model="supplier" filterable placeholder="请选择时段" size="medium" class="w-100p">
                            <el-option
                                v-for="item in suppliers"
                                :key="item.id"
                                :label="item.name"
                                :disabled="item.state!='NORMAL'"
                                :value="item.id">
                            </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top:20px;margin-bottom:20px">
                    <el-col :span="14">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">门店</div>
                            <el-cascader placeholder="请选择门店" class="el-cascader-margin w-100p"  size="medium"
                                        :options="treeData"
                                        :show-all-levels="false"
                                        change-on-select>
                            </el-cascader>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div>
                            <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">导出</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-row style="padding:30px 0;margin:15px;border:1px solid #ddd;background:#fff">
                <el-col :span="12" style="border-right:1px solid #ccc">
                    <div>
                        <div>账单总数</div>
                        <div>0.00</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <div>消费总额</div>
                        <div>0.00%</div>
                    </div>
                </el-col>
            </el-row>
            <div style="padding:20px 10px;margin:15px;border:1px solid #ddd;background:#fff">
                <div class="text-left" style="margin-bottom:20px">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search">导出</el-button>
                </div>            
                <el-row :gutter="20">
                    <el-col :span="24">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        :border="true"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        width="50">
                        </el-table-column>
                        <el-table-column
                                label="时段">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="账单总数">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="账单占比">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="消费总额">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="消费占比">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="单均">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-col>
                </el-row>
            </div>
            <div style="padding:20px 10px;margin:15px;border:1px solid #ddd;background:#fff">
                <div id="myChart" style="width:100%;padding-left: -10%;height:400px;"></div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      isUnfurl: true,
      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      labels: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      shouldAmounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      realAmounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      totalNums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      input: "",
      currentPage: 1,
      addShow: false
    };
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChart() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let labels = this.labels;
      let shouldAmounts = this.shouldAmounts;
      let realAmounts = this.realAmounts;
      let totalNums = this.totalNums;
      myChart.setOption({
        title: {
            text:'时段账单统计'
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["账单总数", "消费总额", "单据数量"]
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: labels
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "金额"
          },
          {
            type: "value",
            name: "数量"
          }
        ],
        series: [
          {
            name: "应收金额",
            type: "bar",
            data: shouldAmounts
          },
          {
            name: "实收金额",
            type: "bar",
            data: realAmounts
          },
          {
            name: "单据数量",
            type: "line",
            yAxisIndex: 1,
            data: totalNums
          }
        ]
      });
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    addSuccess(item) {
      this.addShow = false;
      this.initData();
    },
    addClose() {
      this.addShow = false;
    },
    unfurl() {
      if (this.isUnfurl) {
        this.isUnfurl = false;
      } else {
        this.isUnfurl = true;
      }
    }
  }
};
</script>

<style scoped>
</style>
